// import { memo } from "react"
// import styled from "@emotion/styled"
// import PointsHeader from "./components/PointsHeader"
// import Card from "./components/PointsCard"
// import TasksOverview from "./components/TasksOverview"
// import { SvgComponent } from "@/components/base/Svg"
// import { ImageComponent } from "@/components/base/Image"

// const Points = () => {
//     return (
//         <PageRoot>
//             <HeaderRoot>
//                 <HeaderTopBg>
//                     <BackgroundImg />
//                     <FilterImg preserveAspectRatio="none" />
//                 </HeaderTopBg>
//                 <CardWrapper>
//                     <PointsHeader />
//                     <Card points={2345678} />
//                 </CardWrapper>
//                 <HeaderFootBg>
//                     <BgOrImg preserveAspectRatio="none" />
//                     <BgWhImg preserveAspectRatio="none" />
//                 </HeaderFootBg>
//             </HeaderRoot>
//             <ContainerRoot>
//                 <TasksOverview />
//             </ContainerRoot>
//         </PageRoot>
//     )
// }

// const PageRoot = styled.div`
//     display: flex;
//     flex-direction: column;
//     background-color: #ffffff;
//     flex: 1;
//     padding-bottom: 60rem;
//     position: relative;
// `

// const HeaderTopBg = styled.div`
//     display: flex;
//     justify-content: center;
//     background:
//         linear-gradient(0deg, rgba(255, 31, 87, 0.3), rgba(255, 31, 87, 0.3)),
//         radial-gradient(55.2% 55.2% at 100% 0%, #f9c964 0%, rgba(255, 255, 183, 0) 100%);
//     position: absolute;
//     overflow: hidden;
//     width: 100%;
//     height: 240rem;
// `

// const BackgroundImg = styled(ImageComponent("pages/PointsPage/head_bg.webp"))`
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 120%;
//     object-fit: fill;
// `

// const FilterImg = styled(SvgComponent("pages/PointsPage/head_bg_filter.svg"))`
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     opacity: 0.5;

//     & > svg {
//         width: 100%;
//         height: 100%;
//     }
// `

// const HeaderFootBg = styled.div`
//     position: absolute;
//     top: 180rem;
//     left: 0;
//     width: 100%;
//     height: 100%;
//     overflow: hidden;
//     z-index: 1;
// `

// const BgOrImg = styled(SvgComponent("pages/PointsPage/bg_or.svg"))`
//     position: absolute;
//     width: 100%;
//     height: 50rem;
//     overflow: hidden;
// `
// const BgWhImg = styled(SvgComponent("pages/PointsPage/bg_wh.svg"))`
//     position: absolute;
//     top: 14rem;
//     width: 100%;
//     height: 50rem;
//     overflow: hidden;
// `
// const HeaderRoot = styled.div`
//     width: 100%;
//     height: 220rem;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     position: relative;
//     top: 0;
//     left: 0;
//     background: transparent;
// `

// const CardWrapper = styled.div`
//     position: relative;
//     top: 20rem;
//     padding: 0 16rem;
//     width: 100%;
//     height: 210rem;
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     gap: 20rem;
// `
// const ContainerRoot = styled.div`
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: center;
//     position: relative;
//     z-index: 2;
//     background: transparent;
//     width: 100%;
//     padding: 0 12rem;
// `

// export default memo(Points)
import { memo } from "react"
import Image from "@/components/base/Image"
import { css } from "@emotion/react"
import styled from "@emotion/styled"

const Content = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10rem;
    width: 100%;
    flex: 1;
    background: #f5f5f5;
`

const Headers = styled.div`
    font-family: Gilroy;
    color: #131416;
    background: #fff;
    font-size: 18rem;
    font-style: normal;
    font-weight: 700;
    line-height: 28rem;
    text-transform: capitalize;
    height: 44rem;
    padding: 8rem 12rem;
    position: absolute;
    left: 0;
    right: 0;
`

const Info = styled.div`
    color: #40444f;
    text-align: center;
    font-family: Gilroy-Regular;
    font-size: 14rem;
    font-style: normal;
    font-weight: 400;
    line-height: 20rem;
`

const Invite = () => {
    return (
        <>
            <Headers>Points</Headers>
            <Content>
                <Image
                    css={css`
                        width: 200rem;
                        height: 200rem;
                    `}
                    src="base_image/comingSoon.webp"
                />
                <Info>Coming Soon</Info>
            </Content>
        </>
    )
}

export default memo(Invite)
